<template>
  <view class="page-service-submit page-service-reserve">
    <view class="fly-card cust">
      <view class="item" v-if="cust.custId">
        <view class="thumb">
          <van-image src="#" round width="120rpx" height="120rpx"/>
        </view>
        <view class="content">
          <view class="title">
            <text>{{cust.custName}}</text>
            <text class="ft-13 m-l-10">{{cust.sex}} {{cust.age}}岁</text>
          </view>
          <view class="desc">
            <image :src="icon.relationship" />
            <text>关系：直属亲戚</text>
          </view>
        </view>
        <view class="toggle">
          <van-button round size="small" @tap="$utils.gotoPage('/packageA/cust/index', {type: 'checkedCust', id: cust.custId})">
            <image :src="icon.switch" />
            切换患者
          </van-button>
        </view>
      </view>
      <view class="item" v-else @tap="$utils.gotoPage('/packageA/cust/index', {type: 'checkedCust'})">
          <view class="thumb">去添加患者</view>
          <view class="content align-right"><van-icon name="arrow" /></view>
      </view>
    </view>
    <view class="info">
      <van-cell-group inset>
        <fly-area title="会诊地区" :value.sync="form.zoneName" :area-names="form.zoneName" :columns-num="2" :z-index="102" input-align="right" @confirm="getZone">
          <template #icon>
            <image mode="aspectFill" :src="icon.area" />
          </template>
        </fly-area>
        <!-- <fly-picker title="会诊地区" :value.sync="form.areaId" size="large" :z-index="101" input-align="right" :list="initData.areaList" is-link>
          <template #icon>
            <image mode="aspectFill" :src="icon.area" />
          </template>
        </fly-picker> -->
        <fly-actionSheet title="预约服务" :value.sync="form.consultType" size="large" :z-index="101" input-align="right" :list="initData.consultTypeList" is-link @confirm="getConsult">
          <template #icon>
            <image mode="aspectFill" :src="icon.reservationservice" />
          </template>
        </fly-actionSheet>
        <van-cell label="预约时间" :value="calendar.value" size="large" input-align="right" placeloader="请选择" is-link @tap="calendar.show = true" >
          <template #icon>
            <image mode="aspectFill" :src="icon.time" />
          </template>
        </van-cell>
      </van-cell-group>
    </view>
    <view class="p-a-15 service">
      <view class="fly-panel">
        <view class="hd">
          <view class="title">病情描述</view>
          <view class="value" @tap="$refs.showInfo.init()">
            <van-tag round type="primary">收费标准</van-tag>
          </view>
        </view>
        <view class="form">
          <van-field
            v-model="form.illnessDescribe"
            rows="2"
            autosize
            type="textarea"
            placeholder="请输入病情描述"
            @input="e => form.illnessDescribe = e.detail"
          />
        </view> 
        <view class="hd">
          <view class="title">备注</view>
        </view>
        <view class="form">
          <van-field
            v-model="form.custRemark"
            rows="1"
            autosize
            type="textarea"
            placeholder="非必填：意向医院、专科医生（或高端病区服务）"
            @input="e => form.custRemark = e.detail"
          />
        </view> 
        <view class="hd">
          <view class="title">病例或检验单等资料上传</view>
        </view>
        <view class="bd">
          <fly-upload :multiple="true" :maxCount="9" :img-list.sync="imgList"/>
        </view>  
      </view>  
    </view>
    <view class="banner" @tap="callService">
      <image :src="icon.consult" />
    </view>
    <van-submit-bar
      :price="form.payAmt * 100"
      button-type="info"
      button-color="#3678FD"
      button-text="确定预约"
      @submit="submitForm"
    >
    </van-submit-bar>
    <van-calendar
      :show="calendar.show"
      :min-date="calendar.minDate"
      color="#3678FD"
      type="range"
      @close="closeCalendar"
      @confirm="confirmCalendar"
    />
    <show-info ref="showInfo" />
  </view>
</template>

<script>
  import flyUpload from '@/components/flyUpload';
  import flyActionSheet from '@/components/flyActionSheet';
  import flyPicker from '@/components/flyPicker';
  import flyDate from '@/components/flyDate';
  import flyArea from '@/components/flyArea';
  import showInfo from './components/showInfo';
  import moment from 'moment';
  export default {
    data(){
      return{
        pageParams:{},
        icon:{
          area: this.$icon.area,
          time: this.$icon.time,
          reservationservice: this.$icon.reservationservice,
          switch: this.$icon.switch,
          relationship: this.$icon.relationship,
          consult: this.$icon.consult,
        },
        cust:{

        },
        form: {
          zoneId: '440100',
          zoneName: '广州',
          parentId: '440000',
          consultType: null,
          makeEndDate: null,
          makeStartDate: null,
          illnessDescribe: null,
          illnessData: null,
          custId: null,
          custRemark: null,
          payAmt: 0,
        },
        imgList: [],
        initData:{
          areaList:[
            {id:1, name: '广州'},
            {id:2, name: '湛江'}
          ],
          consultTypeList:[]
        },
        calendar: {
          show: false,
          minDate:new Date().getTime(), 
          value: '请选择'
        },

      }
    },
    components:{
      flyUpload,
      flyActionSheet,
      flyPicker,
      flyDate,
      flyArea,
      showInfo,
    },
    onLoad(e){
      this.pageParams = e;
    },
    onShow(){
      this.getInitData();
      if(this.$utils.checkLogin()){
        this.userInfo = uni.getStorageSync('userInfo');
        this.getCust();
      }
    },    
    methods:{
      async getInitData(){
      let consultType = await this.$http('get', '/nursing/oms/aid/itemtrees/lvto_consult_type', {});
      consultType = consultType.filter(item => item.itemId != -1);
      this.initData.consultTypeList = consultType.map(item => {
        item.id = item.itemId;
        item.name = item.itemName;
        item.value = item.descr;
        return item;
      });
      let obj = this.initData.consultTypeList[0];
      this.form.consultType = obj.id;
      this.form.payAmt = obj.value;
    },
      getCust(){
        this.cust = this.$store.state.checked_cust;
        console.log(this.cust);
        if(!this.cust.custId){
          this.$http('get', '/nursing/vcs/vip/cust', {}, (data,msg) => {
            if(data.length > 0){
              this.cust = data[0];
              this.$store.commit('setCheckedCust', this.cust);
              this.form.custId = this.cust.custId;
            };
          })
        }else{
          this.form.custId = this.cust.custId;
        }
        console.log(this.form.custId);
      },
      getChecked(){
        console.log(this.checked);
        this.checked = !this.checked;
      },
      getZone(data){
        let len = data.length;
        console.log(data);
        this.form.parentId = data[0].code;
        this.form.zoneId = data[len-1].code;
        this.form.zoneName = data[len-1].name;
      },
      getConsult(data){
        console.log(data);
        this.form.payAmt = data.value;
      },
      closeCalendar(e){
        console.log(e);
        this.calendar.show = false;
      },
      confirmCalendar(e){
        let start = moment(e.detail[0]).format('YYYY-MM-DD');
        let end = moment(e.detail[1]).format('YYYY-MM-DD');
        this.calendar.value = start + ' ~ ' + end;
        this.form.makeStartDate = start + ' 00:00:00';
        this.form.makeEndDate = end + ' 00:00:00';
        this.calendar.show = false;
      },
      callService() {
				uni.showModal({
					title: "提示",
					content: "点击确认拨打电话给人工客服",
					success: res => {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: "17707594750",
								success: res => {
									console.log(res)
								}
							})
						}
					}
				})
			},
      verifyForm(){
        if(!this.$verify.null(this.form.zoneId, '请选择会诊地区')){
          return false;
        }
        if(!this.$verify.null(this.form.makeStartDate, '请选择预约日期')){
          return false;
        }
        if(!this.$verify.null(this.form.illnessDescribe, '请填写病情描述')){
          return false;
        }
        if(this.imgList.length > 0){
          let arr = this.imgList.map(item => item.name);
          this.form.illnessData = arr.join(',');
        }
        return true;
      },
      submitForm(){
        if(!this.verifyForm()){
          return;
        }
        this.$http('post', '/lvto/lvtoConsultBill', this.form, (data,msg) => {
          this.payOrder(data);
        })
      },
      payOrder(billId){
        uni.login({
						success: res => {
							let params = {
                billId: billId,
                body: '咨询服务单支付',
                code: res.code,
                billType:0
              };
              this.$http('post', '/lvto/pay/payment',params, (data,msg) => {
                let obj = JSON.parse(data)
                uni.requestPayment({
                  provider: 'wxpay',
                  ...obj,
                  success: response => {
                    uni.switchTab({
                      url: '/pages/consult/index'
                    })
                  }
                })
              })
              
						},
					})
      }
    }
  }
</script>